<template>
  <view :style="{ height: windowHeight + 'px' }">
    <camera mode="normal"
            :device-position="flip?'back':'front'"
            flash="off"
            :style="{ height: cameraHeight + 'px' }">
      <cover-view class="controls"
                  style="width: 100%;height: 100%;">

        <!-- 人像面 -->
        <cover-image v-if="photoType"
                     class="w569-h828"
                     :src="baseImgUrl+'/camera/photo.png'" />
      </cover-view>
    </camera>

    <view class="bottom font-36-fff"
          :style="paddingBottom">
      <view class="wrap">
        <view @click="btn_back()">
          返回
        </view>
        <view @click="btn_takePhoto()">
          <image class="w131-h131"
                 :src="baseImgUrl+'/camera/shutter.png'">
          </image>
        </view>
        <view @click="btn_chooseImage()">
          <!--反转键-->
          <cover-image class="menu-flip"
                       :src="baseImgUrl+'/camera/flip.png'"></cover-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseApiUrl, baseImgUrl } from '@/config.js';
export default {
  props: {
    photoType: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      flip: false,
      baseImgUrl: baseImgUrl,
      cameraContext: {}, // 相机实例
      windowHeight: '',
      cameraHeight: '',
      fileUrls: '', // 图片上传之后的路径
    };
  },

  onLoad (options) {
    if (uni.createCameraContext) {
      this.cameraContext = uni.createCameraContext()
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
      uni.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

  onShow () {
    const systemInfo = uni.getSystemInfoSync()
    this.windowHeight = systemInfo.windowHeight
    this.cameraHeight = systemInfo.windowHeight - 80 - this.navigationBarHeight
  },
  methods: {
    // 拍照
    btn_takePhoto () {
      uni.showLoading({
        title: '拍摄中'
      })
      this.cameraContext.takePhoto({
        quality: 'normal',
        success: (res) => {
          // todo 成功拍照
          uni.showToast({
            title: '拍照成功',
            icon: 'none',
            duration: 1200
          })
          this.uploadImage(res.tempImagePath)
        },
        fail: (err) => {
          uni.showToast({
            title: '拍照失败，请检查系统是否授权',
            icon: 'none',
            duration: 1200
          })
        }
      })
    },
    // 从相册选取
    btn_chooseImage () {
      this.flip = !this.flip
    },
    // 上传图片
    uploadImage (url) {
      uni.uploadFile({
        url: baseApiUrl + "/common/upload",
        name: "file",
        header: {
          Authorization: this.$store.state.login.userInfo.token,
        },
        filePath: url,
        success: uploadFileRes => {
          this.fileUrls = JSON.parse(uploadFileRes.data).fileName
          this.$store.state.unitTask[this.label] = this.fileUrls
          // 返回
          this.btn_back()
        },
        fail: err => {
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          });
        }
      });
    },

    //返回
    btn_back () {
      uni.navigateBack()
    },
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight () {
      return uni.getStorageSync("menuInfo").navigationBarHeight || uni.getStorageSync("menuInfo").statusBarHeight / 2;
    },
    // 底部菜单padding掉导航栏的位置
    paddingBottom () {
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px;";
      }
      else {
        return "";
      }
    }
  }
}
</script>

<style lang="less" scoped>
.icon-w569-h828 {
  width: 569rpx;
  height: 828rpx;
}

.controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  width: 100%;
  background-color: #000;

  .wrap {
    padding: 0 80rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.w569-h828 {
  width: 569rpx;
  height: 600rpx;
}

.w131-h131 {
  width: 100rpx;
  height: 100rpx;
}

.font-36-fff {
  font-size: 36rpx;
  color: #fff;
}
.menu-flip {
  width: 100rpx;
}
</style>
